<!--双向转诊订单查询-->
<template>
  <div class="detail">
      <Row>
            <Row class="wuliu">
                <br>
                <Col span="18" offset="6">
                    <Steps :current="current" >
                        <Step :title="curStatus"></Step>
                        <!-- <Step title="订单信息"></Step> -->
                        <Step title="物流轨迹"></Step>
                    </Steps>
                </Col>
            </Row>
        <div class="detail-item">
            <p class="detail-item-tle">订单信息</p>
            <div class="detail-item-com">
              <Row>
                <Col span="8">
                  <p>患者姓名：{{dates.memberName ? dates.memberName : '未获取患者姓名' }}</p>
                  <!-- <p>患者性别：{{dates.gender === 1 ? '男' : '女' }}</p> -->
                  <p>住院号：{{doup.hospitalNumber ? doup.hospitalNumber : '未获取住院号' }}</p>
                  <p>住院科室：{{doup.inpatienDept}}</p>
                  <p>入院日期：{{doup.hospitalStayTime ? doup.hospitalStayTime : '未获取入院日期' }}</p> 
                  <p>出院日期：{{doup.leaveHospitalTime ? doup.leaveHospitalTime : '未获取出院日期' }}</p> 
                  <p>住院天数：{{doup.hospitalDays === -1 ? '未获取住院天数': doup.hospitalDays}}</p>
                </Col>
                <Col span="8">
                  <p>订单状态：{{curStatus}}</p>
                  <p>复印费用：{{dates.mrCopyPrice ? dates.mrCopyPrice + ' 元' : '未获取复印费用'}}</p>
                  <p>病历申请张数：{{dates.mrCopyNumber ? dates.mrCopyNumber + ' 张' : '未获取申请张数'}}</p>
                  <p>收件人： {{dates.receiverName ? dates.receiverName : '未获取联系姓名' }}</p>
                  <p>收件人电话： {{dates.phoneNumber ? dates.phoneNumber : '未获取收件人电话' }}</p>
                  <p>收件人地址： {{dates.addrInfo ? dates.addrInfo : '未获取收件人地址'}}</p>
                </Col>
                <Col span="8">
                    <p>物流单号：{{dates.orderNo ? dates.orderNo : '未获取物流单号' }}</p>
                    <Timeline>
                        <Timeline-item v-for="(item,index) in wulist" :key="index">
                                <p class="time">{{item.acceptTime}}</p>
                                <p class="content">{{item.remark}}</p>
                        </Timeline-item>
                    </Timeline>
                </Col>
              </Row>
            </div>
        </div>
        <!-- <div class="detail-item" v-if="current==1">
            <p class="detail-item-tle">物流轨迹</p>
            <div class="detail-item-com">
                <Col span="12">
                    <p>物流单号：{{dates.orderNo ? dates.orderNo : '未获取物流单号' }}</p>
                    <Timeline>
                        <Timeline-item v-for="(item,index) in wulist" :key="index">
                                <p class="time">{{item.acceptTime}}</p>
                                <p class="content">{{item.remark}}</p>
                        </Timeline-item>
                    </Timeline>
                </Col>
            </div>
        </div> -->
      </Row>
        <div style="width: 100%;height: 35px;text-align: center">
            <!-- <Button type="primary" style="width: 100px;height: 35px;line-height: 0;margin: auto" @click="next" v-if='current==0'>下一页</Button>
            <Button type="primary" style="width: 100px;height: 35px;line-height: 0;margin: auto" @click="next" v-if='current==1'>上一页</Button> -->
            <Button style="width: 100px;height: 35px;line-height: 0;margin: auto" @click="handleGOback">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
            </Button>
        </div>
  </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    name: 'detail',
    data() {
        return {
            wulist:[],
            doup:{},
            dates: {},
            folk: '',
            imgurl: '',
            id:'',
            curStatus:'',
            current:0,
        }
    },
    created(){
        this.id = this.$route.query.Id
        this.gethomecode()
    },
    mounted() {
    },
    beforeDestroy() {
    },
    methods: {
        handleGOback() {
            this.functionJS.queryNavgationTo(this,'/index/comprehensive/medicalrecord/list')
        },
        next(){
            if (this.current == 1) {
                this.current = 0;
            } else {
                this.cahidwhawuliu()
                this.current += 1;
            }
        },
        //病历详情
        gethomecode(){
            this.$axios.post(api.findWxInpMrcopy,{id: this.id}).then(res => {
                if(res.data.code == 1){
                    this.dates = res.data.object;
                    this.doup = this.dates.inpatientDto
                    if(this.dates.curStatus>2){
                        this.current = 1
                    }
                    if(this.dates.orderNo){
                        this.cahidwhawuliu()
                    }
                    if(this.dates.curStatus==1){
                        this.curStatus = '待支付'
                    }else if(this.dates.curStatus==2){
                        this.curStatus = '待邮寄'
                    }else if(this.dates.curStatus==3){
                        this.curStatus = '邮寄中'
                    }else if(this.dates.curStatus==4){
                        this.curStatus = '已完成'
                    }else if(this.dates.curStatus==9){
                        this.curStatus = '已退款'
                    }
                }
                else {
                    this.$Message.error("获取详情失败")
                }
            })
        },
        cahidwhawuliu() {
            const map = {
                expNo: this.dates.orderNo
            }
            this.$axios.post(api.getOrderTraces,map).then(res => {
                if (res.data.code === 1) {
                    var andlist = JSON.parse(res.data.message)
                    andlist.sort((a, b) => a.opcode > b.opcode ? -1 : 1)
                    this.wulist = andlist
                    console.log(this.wulist)
                } else {
                    this.$Message.error(res.data.message || "请求异常");
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .detail{
        padding: 10px;
        width: 100%;
        background: #ffffff;
        box-sizing: border-box;
        .detail-item{
            width: 98%;
            display: flex;
            flex-direction: column;
            margin: 10px auto;
            border: 1px solid #f0f0f0;
            box-shadow: 0 4px 3px #ebedf8;
            border-radius: 5px;
            margin-bottom: 20px;
            .detail-item-tle{
                font-size: 20px;
                padding-left: 15px;
                margin-bottom: 20px;
                color: #333;
                height: 40px;
                line-height: 40px;
                background: #ebedf8;   
            }
            .detail-item-com{
                width: 96%;
                margin: auto;
                font-size: 14px;
                color: #676a6c;
                padding: 25px 0;
                line-height: 40px;
                .img-bor{
                    width: 100%;
                    border: 1px solid #ddd;
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: flex-start;
                }
            }
        }
    }
</style>
